{{extend './base.html'}}
{{block 'title'}}
创建文章
{{/block}}
{{block 'style'}}
<style>
    .list-group-flush li a {
        text-decoration: none;
        color: #4a4a4a;
    }

    .list-group-flush li.li-active a {
        color: #1e7e34;
    }
    .btn-wrapper{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .left-btn{
        margin-left: 100px;
    }
</style>
{{/block}}
{{block 'content'}}
<div class="container">
    <form class="form-horizontal" autocomplete="off">
        {{if blog}}
        <input value="{{blog._id.toString()}}" type="hidden" id="blog_id">
        {{/if}}
        <div class="form-group">
            <label class="col-sm-2 control-label">标题:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="title" placeholder="请输入标题"
                       value="{{if blog}} {{blog.title}} {{else}}  {{/if}}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">作者:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" placeholder="请输入作者"
                       id="author"
                       value="{{if blog}} {{blog.user}} {{else}}  {{/if}}"
                >
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">标签:</label>
            <div class="col-sm-4">
                <select class="form-control" name="tag" id="tag" value="{{if blog}} {{blog.tag.toString()}} {{else}}  {{/if}}">
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">文章内容:</label>
            <div class="col-sm-10">
                <textarea class="form-control" rows="10" id="content">{{if blog}} {{blog.content}} {{else}}  {{/if}}</textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">文章封面:</label>
            <div class="col-sm-10">
                <input type="file" id="cover" value="{{if blog}} {{blog.cover}} {{else}}  {{/if}}">
            </div>
        </div>
    </form>
    <div class="btn-wrapper">
        <div class="left-btn">
            <a href="/user/blog" type="button" class="btn btn-default">返回个人中心</a>
        </div>
        <div class="right-btn">
            {{if blog}}
                <button type="button" class="btn btn-primary" id="edit">更新</button>
            {{else}}
                <button type="button" class="btn btn-primary" id="save">保存</button>
            {{/if}}
        </div>
    </div>
</div>
{{/block}}
{{block 'js'}}
<script type="text/javascript">
$(function () {
    $.ajax({
        url: '/blog/tag',
        success: function (res) {
            if (res.err_code === 0) {
                $.each(res.result, function (i, val) {
                    $('#tag').append(`<option value="${val._id}">${val.blog_tag}</option>`)
                })
                {{if blog}}
                    $("#tag option[value='{{blog.tag}}']").prop("selected", true);
                {{/if}}
            }
        }
    })
    $('#save').click(function () {
        const title = $('#title').val().trim();
        const author = $('#author').val().trim();
        const content= $('#content').val().trim();
        const tag = $('#tag').val();
        const formData = new FormData(); // 创建表单对象
        const coverImage = $('#cover')
        formData.append('cover', coverImage[0].files[0]); // 设置文件
        formData.append('title', title)
        formData.append('author', author)
        formData.append('content', content)
        formData.append('tag', tag)
        if (title && author && content && tag) {
            $.ajax({
                url: "/blog/create",
                type: 'POST',
                contentType : false,
                processData : false,
                data: formData,
                success: function (res) {
                    if (res.err_code === 0) {
                        cocoMessage.success(res.msg);
                        setTimeout(() => {
                            location.href = '/user/blog'
                        }, 500)
                    } else {
                        cocoMessage.warning(res.msg);
                    }
                }
            })
        } else {
            cocoMessage.warning('表单项必填');
        }
    })
    $('#edit').click(function () {
        const title = $('#title').val();
        const author = $('#author').val();
        const content= $('#content').val();
        const tag = $('#tag').val();
        const formData = new FormData(); // 创建表单对象
        const coverImage = $('#cover')
        const id = $('#blog_id').val().trim()
        formData.append('_id', id)
        formData.append('cover', coverImage[0].files[0]); // 设置文件
        formData.append('title', title.trim())
        formData.append('author', author.trim())
        formData.append('content', content)
        formData.append('tag', tag)
        console.log('5555')
        if (title && author && content && tag) {
            $.ajax({
                url: '/blog/update',
                type: 'PUT',
                contentType : false,
                processData : false,
                data: formData,
                success: function (res) {
                    if (res.err_code === 0) {
                        cocoMessage.success(res.msg);
                        setTimeout(() => {
                            location.href = '/user/blog'
                        }, 500)
                    } else {
                        cocoMessage.warning(res.msg);
                    }
                }
            })
        } else {
            cocoMessage.warning('表单项必填');
        }
    })
})
</script>
{{/block}}

